<template>
  <Form :model="formItem" :label-width="80" inline>
    <!-- <FormItem label="分公司选择" :label-width="100">
      <Select v-model="formItem.subCompany">
        <Option
          v-for="item in subCompanyList"
          :value="item.value"
          :key="item.value"
        >
          {{ item.label }}
        </Option>
      </Select>
    </!-->
    <!-- <FormItem label="站点选择">
      <Select v-model="formItem.station">
        <Option
          v-for="item in stationList"
          :value="item.value"
          :key="item.value"
        >
          {{ item.label }}
        </Option>
      </Select>
    </!-->
    <FormItem label="场景选择" :label-width="100">
      <Select v-model="formItem.category">
        <Option
          v-for="item in categoryList"
          :value="item.value"
          :key="item.value"
        >
          {{ item.label }}
        </Option>
      </Select>
    </FormItem>
    <FormItem label="监控选择" :label-width="100">
      <Select v-model="formItem.channel">
        <Option
          v-for="item in channelList"
          :value="item.value"
          :key="item.value"
        >
          {{ item.label }}
        </Option>
      </Select>
    </FormItem>
    <FormItem :label-width="20">
      <!-- <Button type="primary" @click="searchData">播放</Button> -->
      <!-- <Button style="margin-left:8px">重置</Button> -->
    </FormItem>
  </Form>
</template>

<script>
import constData from "@/util/constData2";
export default {
  mane: "myForm",
  props: {
    subCompanyList: {
      type: Array
    },
    stationList: {
      type: Array
    },
    categoryList: {
      type: Array
    },
    channelList: {
      type: Array
    }
  },
  data() {
    return {
      formItem: {
        subCompany: "",
        station: "",
        category: "",
        channel: ""
      },
      allChannelList: constData.channelList
    };
  },
  computed: {
    subCompany: function() {
      return this.formItem.subCompany;
    },
    station: function() {
      return this.formItem.station;
    },
    category: function() {
      return this.formItem.category;
    },
    channel: function() {
      return this.formItem.channel;
    }
  },
  created(){
    console.log('表单：', this.$route)
    this.formItem.subCompany = "xian";
    // this.formItem.category = randChannel["category"];
    // this.formItem.channel = randChannel["value"];

    let sessionStation = sessionStorage.getItem("station")

    console.log('sessionStation:', sessionStation)
    if (sessionStation) {
      this.formItem.station = sessionStation
    }

    let sss = this.allChannelList.find((ele)=>{
      return ele.station === this.formItem.station
    })
    console.log('sss', sss)
    this.formItem.category = sss["category"];
    this.formItem.channel = sss["value"];
  },
  mounted() {
    // 默认监控画面：西安分公司-西万路-便利店-摄像头1
    //this.formItem.subCompany = "xian";
    //this.formItem.station = "xiwan";
    //this.formItem.category = "checkout";
    //this.formItem.channel = "1";
    // this.searchData();
    let randChannel = this.getRandomChannel();
    console.log(randChannel)
  },
  watch: {
    subCompany: function() {
      // console.log("选择分公司：", this.formItem.subCompany);

      this.$emit("changeSubCompany", this.formItem.subCompany);
    },
    station: function() {
      // console.log("选择站点：", this.formItem.station);

      this.$emit("changeStationAndCategory", {
        station: this.formItem.station,
        category: this.formItem.category
      });
      this.searchData();
    },
    category: function() {
      // console.log("选择场景：", this.formItem.category);

      this.$emit("changeStationAndCategory", {
        station: this.formItem.station,
        category: this.formItem.category
      });
    },
    channel: function() {
      // console.log("选择监控：", this.formItem.channel);

      this.searchData();
    }
  },
  methods: {
    searchData: function() {
      if (
        this.formItem.station !== undefined &&
        this.formItem.channel !== undefined
      ) {
        // console.log("收集表单数据：", this.formItem);

        this.$emit("handleSearchMonitor", this.formItem);
      }
    },
    getRandomChannel() {
      var range = this.allChannelList.length - 1;
      var rand = Math.random();
      var num = Math.round(rand * range);
      console.log("随机数：" + num);
      return this.allChannelList[num];
    }
  }
};
</script>

<style></style>
